<template>
  <Dialog
    class="edit-dialog"
    title="续约"
    :visible.sync="dialogVisible"
    @submit="submit"
  >
    <el-form label-width="200px">
      <el-form-item label="请选择续约到期日" required>
        <el-date-picker
          :clearable="false"
          v-model="localDateTime"
          :picker-options="pickerOptions"
          type="date"
          value-format="timestamp"
          placeholder="选择截止日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<script>
import { renewal } from "@/api";

export default {
  name: "Renewal",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      //对话框状态--------------------------------------------
      dialogVisible: this.visible,
      //截止日期--------------------------------------------
      localDateTime: new Date().getTime(),
      //限制选择今天之后--------------------------------------------
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
        }
      }
    };
  },

  watch: {
    //监听对话框状态--------------------------------------------
    dialogVisible(newVal) {
      this.$emit("update:visible", newVal);
    }
  },

  methods: {
    //确定提交--------------------------------------------
    submit() {
      if (!this.localDateTime) {
        this.$message({ type: "warning", message: "请选择日期" });
        return;
      }

      const data = {
        uuid: this.info.uuid,
        localDateTime: this.localDateTime
      };

      renewal(data).then(res => {
        if (res.state == 100) {
          this.$message({ type: "success", message: res.msg });
          this.dialogVisible = false;
          this.$emit("updateData");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-tree {
  min-height: 300px;
  max-height: 500px;
}
</style>
